<template>
    <div class="assets">
        <div class="myasset">
            <div class="tt">我的资产</div>
            <div class="assetList">
                <div class="assetItem">
                    <p class="assetCount">
                        <span class="unit">¥</span>
                        <span class="value">
                            0
                            <span class="reddot"></span>
                        </span>
                    </p>
                    <p class="assetName">余额</p>
                </div>
                <div class="assetItem">
                    <p class="assetCount">
                        <span class="value">
                            0
                        </span>
                    </p>
                    <p class="assetName">红包</p>
                </div>
                <div class="assetItem">
                    <p class="assetCount">
                        <span class="value">
                            0
                        </span>
                    </p>
                    <p class="assetName">优惠券</p>
                </div>
                <div class="assetItem">
                    <p class="assetCount">
                        <span class="value">
                            0
                        </span>
                    </p>
                    <p class="assetName">积分</p>
                </div>
                <div class="assetItem">
                    <p class="assetCount">
                        <span class="value">
                            0
                        </span>
                    </p>
                    <p class="assetName">礼品卡</p>
                </div>
            </div>
        </div>
        <div class="card_wrap">
            <div class="card">
                <div class="content">
                    <div class="seven_min_card"></div>
                    <div class="art_word"></div>
                    <div class="text">&nbsp;|</div>
                </div>
                <button class="time_limit">&nbsp;限时开通 &nbsp;</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">

.myasset {
    background-color: #fff;
    width: 100%;
    height: 142.5px;

    .tt {
        width: 100%;
        height: 52.5px;
        line-height: 52.5px;
        margin-left:  15px;
        color: #333;
        font-size: 14px;
        border-bottom: 1px solid #d9d9d9;
    }

    .assetList {
        display: flex;
        width: 100%;
        height: 80px;
        justify-content:space-around;
        text-align: center;

        .assetItem {
            width: 50px;
            margin-top: 25px;

            .assetCount {
                margin-bottom: 1px;
                font-size: 20px;

            }

            .unit {
                font-size: 14px;
            }

            .value {
                font-size: 18px;

                .reddot {
                    position: absolute;
                    height: 7px;
                    width: 7px;
                    border-radius: 50%;
                    background-color: red;
                }
            }

            .assetName {
                font-size: 14px;
            }
        }
    }
}

.card_wrap {
    width: 100%;
    height: 45px;
    padding-top:10px;
    margin-bottom: 10px;
    background-color: #fff;

    .card {
        padding: 0 7.5px;
        display: flex;
        box-sizing: border-box;
        height: 45px;
        background-color: #fff6f4;
        border-radius: 6px;
        border: 1px solid rgba(221, 26, 33, .1);

        .content {
            display: flex;

            .seven_min_card {
                margin: 5px 0;
                height: 27px;
                width: 27px;
                margin-left: 2px;
                background-size: 30px 30px;
                background-image: url("https://yanxuan.nosdn.127.net/static-union/1679024383124f83.png");
            }

            .art_word {
                margin: 12px 0;
                height: 15px;
                width: 65px;
                margin-left: 4px;
                background-size: 65px 18px;
                background-image: url("https://yanxuan.nosdn.127.net/static-union/1679024383363de7.png");
            }

            .text {
                font-weight: 100;
                font-size: 12px;
                margin: 13px 0;
            }
        }

        .time_limit {
            height: 22px;
            color: #fff;
            padding: 0 5px;
            font-size: 12px;
            border: solid rgb(210, 0, 26) 1px;
            background-color: rgb(210, 0, 26);
            border-radius: 10px;
            margin: 10px 0 0 170px;
            line-height: 0px;
        }

    }

}
</style>